<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      title="指标分析"
      :background="{ background: 'linear-gradient(90deg, #69b0ff, #e58b8a)' }"
      title-color="#fff"
    >
    </u-navbar>

    <view class="charts" v-if="loaded">
      <qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartDataBMI"
      />
      <qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartDataPressure"
      />
      <qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartDataT"
      />
      <qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartDataNiao"
      />
      <qiun-data-charts 
        type="line"
        :opts="opts"
        :chartData="chartDataYM"
      />
    </view>
  </view>
</template>

<script>
import moment from "moment";
import { getHealth, getPeriod } from "../../api/system/api";
export default {
  data() {
    return {
      healthList: [],
      periodList: [],
      userInfo: {},
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {
          position: 'top'
        },
        xAxis: {
          scrollShow: true,
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      },
      chartDataBMI: {},
      chartDataPressure: {},
      chartDataT: {},
      chartDataNiao: {},
      chartDataYM: {},
      loaded: false
    };
  },
	onTabItemTap() {
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
        this.getData();
      }
    })
	},
  mounted() {
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
        this.getData();
      }
    })
  },
  methods: {
    getData() {
      getHealth({
        date: null,
        userId: this.userInfo.id
      }).then((res) => {
        this.healthList = res.data.data.sort((a, b) => {
          return moment(a.date).valueOf() - moment(b.date).valueOf();
        });
        let optionBMI = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "BMI",
              data: this.healthList.map(v => v.bmi)
            }
          ]
        };
        this.chartDataBMI = JSON.parse(JSON.stringify(optionBMI));
        
        let optionPressure = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "低压",
              data: this.healthList.map(v => v.pressureLow)
            },
            {
              name: "高压",
              data: this.healthList.map(v => v.pressureHigh)
            }
          ]
        };
        this.chartDataPressure = JSON.parse(JSON.stringify(optionPressure));

        let optionT = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "体温",
              data: this.healthList.map(v => v.temperature)
            },
          ]
        };
        this.chartDataT = JSON.parse(JSON.stringify(optionT));
        
        
        let optionNiao = {
          categories: this.healthList.map(v => v.date),
          series: [
            {
              name: "饮水量/ml",
              data: this.healthList.map(v => v.urine)
            }
          ]
        };
        this.chartDataNiao = JSON.parse(JSON.stringify(optionNiao));

        getPeriod({
          userId: this.userInfo.id
        }).then((rs) => {
          this.loaded = true
          console.log(rs.data.data)
          let series = []
          for (let item of rs.data.data) {
            let period = item.period.split('~')
            series.push(moment(period[1]).diff(moment(period[0]), 'days'))
          }
          rs.data.data.forEach((v, i) => {
            rs.data.data[i].period = moment(v.period.split('~')[0]).format('MM-DD') + '~' + moment(v.period.split('~')[1]).format('MM-DD')
          })
          let option = {
            categories: rs.data.data.map(v => v.period),
            series: [
              {
                name: "经期天数",
                data: series
              }
            ]
          };
          this.chartDataYM = JSON.parse(JSON.stringify(option));
        });
      });
    },
  },
};
</script>

<style lang="scss">
.charts {
  padding: 30rpx;
  width: 100%;
  height: 500rpx;
}
.chart {
  width: 100%;
  height: 500rpx;
}
</style>
